<template>
	<view class="content">
		<!-- 主页 -->
		<view class="indexTop">
			<image src="../../static/img/index_students.svg"></image>
			<text>速配</text>
			<image src="../../static/img/index_question.svg"></image>
		</view>

		<view class="conBox">
			<view v-for="item in detailList" :class="['detail',item.id%2==0?'left':'rigth']">
				<image :src=item.headUrl mode="aspectFit"></image>
				<text>#{{item.con}}</text>
			</view>
		</view>

		<view class="indexBottom">
			<view class="indexLeft">
				<text>语音匹配</text>
				<image src="../../static/img/index_left.svg" mode=""></image>
				<text>今日剩余2次</text>
			</view>
			<view class="indexRight" @click="toChatDetail">
				<text>在线匹配</text>
				<image src="../../static/img/index_right.svg" mode=""></image>
				<text>今日剩余2次</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailList: [{
						id: 0,
						con: "遇见你很开心",
						headUrl: "../../static/head/1.jpg"
					},
					{
						id: 1,
						con: "#母胎solo渴望爱情",
						headUrl: "../../static/head/2.jpg"
					},
					{
						id: 2,
						con: "只为找到对的人",
						headUrl: "../../static/head/3.jpg"
					},
					{
						id: 3,
						con: "很高兴认识你",
						headUrl: "../../static/head/4.jpg"
					},
					{
						id: 4,
						con: "性别男爱好女",
						headUrl: "../../static/head/5.jpg"
					},
					{
						id: 5,
						con: "你的声音真好听",
						headUrl: "../../static/head/6.jpg"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			toChatDetail() {
				uni.navigateTo({
					url: "/pages/chatDetail/chatDetail"
				})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		height: 100%;
		background: linear-gradient(180.29deg, rgba(184, 134, 248, 0.4) 0.65%, rgba(184, 134, 134, 0) 98.76%);

		.indexTop {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;

			image {
				float: left;
				width: 56rpx;
				height: 56rpx;
				margin-left: 40rpx;
				margin-top: 20rpx;
			}

			text {
				font-size: 40rpx;
			}

			image:nth-last-child(1) {
				float: right;
				margin-right: 40rpx;
			}
		}

		.conBox {
			margin-top: 68rpx;

			.left {
				float: left;
				clear: both;
			}

			.rigth {
				float: right;
				clear: both;
			}

			.detail {
				width: fit-content;
				height: 100rpx;
				border-radius: 44rpx;
				margin-left: 44rpx;
				border: 2rpx solid rgba(187, 187, 187, 1);
				margin-bottom: 28rpx;

				image {
					float: left;
					width: 56rpx;
					height: 56rpx;
					border-radius: 56rpx;
					margin-left: 24rpx;
					margin-top: 22rpx;
					margin-bottom: 24rpx;
				}

				text {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 28rpx;
					padding-left: 32rpx;
					padding-right: 24rpx;
				}
			}
		}

		.conBox::after {
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;

		}

		.indexBottom {
			width: 750rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			// height: 260rpx;
			border-radius: 60rpx 60rpx 0rpx 0rpx;
			background-color: #fff;
			padding-top: 80rpx;
			padding-bottom: 76rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				padding-right: 20rpx;
				padding-top: 42rpx;
				float: right;
			}

			.indexLeft {
				float: left;
				margin-left: 44rpx;
				width: 288rpx;
				height: 144rpx;
				background-color: rgba(184, 134, 248, 0.33);
				border: 2rpx solid rgba(187, 187, 187, 1);
				border-radius: 24rpx;

				text {
					padding-left: 44rpx;
				}

				text:nth-child(1) {
					float: left;
					font-size: 40rpx;
					height: 56rpx;
					padding-top: 24rpx;
				}

				text:nth-last-child(1) {
					float: left;
					white-space: nowrap;
					font-size: 28rpx;
				}
			}

			.indexRight {
				float: right;
				width: 288rpx;
				height: 144rpx;
				background-color: rgba(147, 210, 243, 0.34);
				border: 2rpx solid rgba(187, 187, 187, 1);
				border-radius: 24rpx;
				margin-right: 64rpx;

				text {
					padding-left: 44rpx;
				}

				text:nth-child(1) {
					float: left;
					font-size: 40rpx;
					height: 56rpx;
					padding-top: 24rpx;
				}

				text:nth-last-child(1) {
					float: left;
					white-space: nowrap;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
